<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/initial.css">
    <link rel="stylesheet" href="../css/test.css">
</head>
<body>
    <h2 style="margin-top: 8em;">一、inline-block和float的布局选择</h2>
    <!--inline-block可以自动对齐，float则不会。-->
    <!--对子元素使用float，父元素会高度塌陷。-->
    <!--a.对于横向排列东西来说，我更倾向与使用inline-block来布局，因为这样清晰，也不用再像浮动那样清除浮动，害怕布局混乱等等。-->
    <!--b.对于浮动布局就用于需要文字环绕的时候，毕竟这才是浮动真正的用武之地，水平排列的是就交给inline-block了。-->
   <div style="background-color: grey;height: 12em;margin-top: 0em;">
       <div id="child1">
       </div>
       <div id="child2">
       </div>
   </div>
    <div style="background-color: yellowgreen;height:55em;">

    </div>


    <div id="static">

    </div>
</body>
</html>